<template>
	<view>
		<view class="tabbox1">
			<view v-for="(tab, index) in tabs" :key="index" class="tab1" :class="{'active': currentTab === index}" @click="currentTab = index">
				{{ tab }}
				<view v-if="currentTab === index" class="tab-underline"></view>
			</view>
		</view>
		
		<view v-show="currentTab === 0" class="boxnr1">
			<view class="page">第一个页面的内容</view>
		</view>
		<view v-show="currentTab === 1" class="boxnr1">
			<view class="page">第二个页面的内容</view>
		</view>
		<view v-show="currentTab === 2" class="boxnr1">
			<view class="page">第三个页面的内容</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0, // 默认选中第一个tab
				tabs: ['界面1', '界面2', '界面3'] // tab 标题数组
			};
		}
	};
</script>

<style>
	.tabbox1 {
		width: 96%;
		padding: 2%;
		background-color: red;
		display: flex;
		justify-content: space-between; /* 平分空间 */
	}

	.tab1 {
		width: 29.33%;
		padding: 2%;
		color: white;
		text-align: center;
		font-size: 25rpx;
		transition: color 0.3s; /* 平滑过渡效果 */
		cursor: pointer; /* 鼠标指针变为手型 */
		position: relative; /* 用于定位伪元素 */
	}

	.tab1.active {
		color: black; /* 选中状态的字体颜色 */
	}

	.tab-underline {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2rpx;
		background-color: white;
	}

	.boxnr1 {
		width: 100%;
		height: 70vh;
		/* display: none; 移除 display: none */
		background-color: paleturquoise;
	}

	.page {
		width: 100%;
		height: 100%;
		background-color: #f0f0f0; /* 背景颜色 */
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #333;
	}
</style>